import { HeartFilled, SendOutlined } from "@ant-design/icons";
import { HTMLAttributes, ReactNode } from "react";
import { clsx } from "clsx";
import { Avatar } from "@/ui/cpts/std/Avatar";
import { Tag, Tooltip } from "antd";
import { XHSComment } from "@common/models/xhs/notes";
import dayjs from "dayjs";
import { Image } from "antd";
import { transportMessageToDisplay } from "@/ui/utils/transportMessageToDisplay";
import { Wrapper } from "./styles";

interface ActionProps extends HTMLAttributes<HTMLDivElement> {
  text?: string;
  children?: ReactNode;
}

function Action(props: ActionProps) {
  const { children, text, className, ...restProps } = props;

  return (
    <div className={clsx("message-card__action", className)} {...restProps}>
      <div className={"message-card__action-icon"}>{children}</div>
      {text && <div className={"message-card__action-text"}>{text}</div>}
    </div>
  );
}

interface MessageCardProps extends HTMLAttributes<HTMLDivElement> {
  comment: XHSComment;

  indentLevel?: number; // 缩紧级别，0 - 不锁进
  onReplyClick?: (target: XHSComment) => void;
  noteDeleted?: boolean;
}
export function MessageCard(props: MessageCardProps) {
  const {
    indentLevel,
    className,
    comment,
    onReplyClick,
    noteDeleted,
    ...restParams
  } = props;

  return (
    <Wrapper
      className={clsx("message-card", className, {
        [`indent-level-${indentLevel}`]: indentLevel,
        unchecked: !comment.mention?.isChecked,
      })}
      {...restParams}
      $indentLevel={indentLevel}
      data-comment-id={comment.id}
    >
      <div className={"message-card__summary"}>
        <div className={"message-card__author"}>
          <Avatar
            className={"message-card__author-avatar"}
            src={comment.user_info.image}
            alt={"CN"}
          />
          {comment.user_info.nickname}

          {comment.mention?.user_info.indicator && (
            <Tag color={"magenta"} style={{ marginLeft: 4 }}>
              {comment.mention.user_info.indicator?.replace("你的", "")}
            </Tag>
          )}
        </div>
        <div className={"message-card__create-time"}>
          {dayjs(comment.create_time).fromNow()}
        </div>
        <div className={"message-card__location"}>{comment.ip_location}</div>
        {comment.mention && (
          <div className={"message-card__category"}>
            {comment.mention.title}
          </div>
        )}
        <div className={"message-card__action-list"}>
          {!!parseInt(comment.like_count as any) && (
            <Action text={comment.like_count.toString()}>
              <HeartFilled style={{ color: "#ff7979" }} />
            </Action>
          )}
        </div>
      </div>

      <div className={"message-card__content"}>
        <div className={"message-card__action-list"}>
          {noteDeleted ? null : (
            <Action>
              <Tooltip title={"回复"} placement={"top"}>
                <SendOutlined
                  className={"reply-button"}
                  onClick={() => {
                    if (onReplyClick) {
                      onReplyClick(comment);
                    }
                  }}
                />
              </Tooltip>
            </Action>
          )}
        </div>

        <div className={"message-card__content-container"}>
          {(() => {
            const targetComment =
              comment.mention?.comment_info?.target_comment ||
              comment.target_comment;
            return (
              targetComment?.content && (
                <div className={"message-card__content-quote"}>
                  {transportMessageToDisplay(targetComment.content)}
                </div>
              )
            );
          })()}

          <div className={"message-card__content-wrapper"}>
            {comment.content && (
              <div className={"message-card__content-container__text"}>
                <p>{transportMessageToDisplay(comment.content)}</p>
              </div>
            )}
            <div className={"message-card__content-container__pictures"}>
              <Image.PreviewGroup>
                {comment.pictures?.map((p, idx) => (
                  <Image
                    width={100}
                    src={p.url_default}
                    alt={"img"}
                    key={`${comment.id}_img_${idx}`}
                  />
                ))}
              </Image.PreviewGroup>
            </div>
          </div>
        </div>
      </div>
    </Wrapper>
  );
}
